<script setup lang="ts">
import { ref, reactive } from 'vue'
import Footer from '@/components/layout/Footer.vue'
import Header from '@/components/layout/Header.vue'
const dialogVisible = ref<boolean>(false)
const investedFunds = ref<number>()
const dialogType = ref<string>('')
const showDialog = (type: string) => {
    dialogType.value = type
    dialogVisible.value = true
}
</script>

<template>
    <Header />
    <div class="max-w-[1440px] mx-[auto] mt-[20px]">
        <el-row :gutter="16">
            <el-col :span="8">
                <el-card>
                    <div class="h-[328px]">
                        <div class=" font-bold text-[18px]">交易"智"变，尽在UHX量化！</div>
                        <div class="leading-[26px] text-[#4B5563] text-[16px] mt-[16px]">我们的量化交易策略采用先进的数学模型和算法，通过
                            对市场数据的深度分析，自动识别交易机会并执行交
                            易。系统全天候运行，严格控制风险，为投资者提供稳
                            定可靠的收益。</div>
                        <div class="leading-[26px] text-[#4B5563] text-[16px] mt-[6px]">
                            平台提供多种投资策略选择，从稳健型到进取型，满足
                            不同风险偏好投资者的需求。所有策略都经过严格的回
                            测验证，并在实盘交易中保持着优秀的业绩表现。 保险仓资金来源包括：
                        </div>
                        <div class="leading-[26px] text-[#4B5563] text-[16px]">1. 平台初始存入10万U作为底池，保障用户资金安全</div>
                        <div class="leading-[26px] text-[#4B5563] text-[16px]">2. 用户参与实盘存入保险金</div>
                        <div class="leading-[26px] text-[#4B5563] text-[16px]">3.用户结算实盘，盈利平台分成部分存入</div>
                        <div class="leading-[26px] text-[#4B5563] text-[16px]">4. 用户结算实盘，亏损赔付用户转出）</div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="16">
                <el-card>
                    <div class="h-[328px]">
                        <div class="flex items-center justify-between">
                            <div class=" font-bold text-[18px]">保险仓资金池</div>
                            <el-popover width="250" placement="left-end" title="什么是保险仓资金池?" trigger="hover"
                                content="保险仓资金池是平台为用户提供的风险对冲机制。当策略发生亏损时，保险仓会自动进行赔付，帮助用户降低投资风险，资金池由平台管理，确保资金安全和透明">
                                <template #reference>
                                    <el-icon>
                                        <QuestionFilled />
                                    </el-icon>
                                </template>
                            </el-popover>
                        </div>
                        <div class="h-[40px] mt-[24px] text-[36px] text-center font-[500] leading-[40px]">$
                            5,286,392.86</div>
                        <div class="mt-[8px] text-center text-[16px] text-[#6B7280]">实时资金池总额</div>
                        <div
                            class="mt-[32px] h-[49px]  mb-[14px] leading-[49px] border-0 border-b-[1px] border-[#F3F4F6] border-solid flex justify-between items-center">
                            <div>
                                <span class="text-[#4B5563]">150****2813</span>
                                <span class="ml-[15px]">结算盈利分成划入（波段交易策略 B2）</span>
                            </div>
                            <div>
                                <span class="text-[#16A34A]">+245.0$</span>
                                <span class="text-[#4B5563] ml-[10px]">2025-07-21 20:18:11</span>
                            </div>
                        </div>
                        <div
                            class="h-[49px] mb-[14px] leading-[49px] border-0 border-b-[1px] border-[#F3F4F6] border-solid flex justify-between items-center">
                            <div>
                                <span class="text-[#4B5563]">150****2813</span>
                                <span class="ml-[15px]">结算盈利分成划入（波段交易策略 B2）</span>
                            </div>
                            <div>
                                <span class="text-[#DC2626]">-145.0$</span>
                                <span class="text-[#4B5563] ml-[10px]">2025-07-21 20:18:11</span>
                            </div>
                        </div>
                        <div
                            class="h-[49px] mb-[14px] leading-[49px] border-0 border-b-[1px] border-[#F3F4F6] border-solid flex justify-between items-center">
                            <div>
                                <span class="text-[#4B5563]">150****2813</span>
                                <span class="ml-[15px]">结算盈利分成划入（波段交易策略 B2）</span>
                            </div>
                            <div>
                                <span class="text-[#16A34A]">+245.0$</span>
                                <span class="text-[#4B5563] ml-[10px]">2025-07-21 20:18:11</span>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="24" class="mt-[24px]">
                <el-card>
                    <div class="h-[594px]">
                        <div class="flex justify-between items-center">
                            <div class=" font-bold text-[18px]">顶级策略实盘</div>
                        </div>
                        <el-row :gutter="16" class="mt-[24px]">
                            <el-col :span="8" v-for="icon in 3" :key="icon">
                                <el-card shadow="never">
                                    <div class="h-[490px] relative">
                                        <div class="flex justify-between items-center">
                                            <div>
                                                <div class="font-[500]">趋势跟踪策略 A1</div>
                                                <div class="mt-[4px]">
                                                    <el-tag type="primary">五星策略</el-tag>
                                                    <el-tag type="success" class="ml-[8px]">稳健性</el-tag>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="grid grid-cols-2 gap-4 mt-[20px]">
                                            <div class="bg-green-50 rounded-md px-[10px] py-[5px]">
                                                <div class="text-[#6B7280] text-[14px]">预计年化</div>
                                                <div class="text-[18px] mt-[2px] text-[#16A34A] font-[500]">+42.8%</div>
                                            </div>
                                            <div class="bg-red-50 rounded-md px-[10px] py-[5px]">
                                                <div class="text-[#6B7280] text-[14px]">最大回撤</div>
                                                <div class="text-[18px] mt-[2px] text-[#DC2626] font-[500]">-8.8%</div>
                                            </div>
                                        </div>
                                        <div class="grid grid-cols-2 mt-[20px]">
                                            <div>
                                                <div class="text-[#6B7280] text-[14px]">最小投入</div>
                                                <div class="text-[18px] mt-[2px] font-[500]">¥500</div>
                                            </div>
                                            <div>
                                                <div class="text-[#6B7280] text-[14px]">最大投入</div>
                                                <div class="text-[18px] mt-[2px] font-[500]">¥5,000</div>

                                            </div>
                                        </div>
                                        <div class="grid grid-cols-2 mt-[20px] mb-[20px]">
                                            <div>
                                                <div class="text-[#6B7280] text-[14px]">参与人数</div>
                                                <div class="text-[18px] mt-[2px] font-[500]">1,286</div>

                                            </div>
                                            <div>
                                                <div class="text-[#6B7280] text-[14px]">剩余额度</div>
                                                <div class="text-[18px] mt-[2px] font-[500]">¥2.8M</div>
                                            </div>
                                        </div>
                                        <div
                                            class="h-[20px] leading-[20px] mb-[12px] flex justify-between items-center">
                                            <div class="text-[#4B5563]">150****2288</div>
                                            <div class="font-[500]">投入金额 ¥5,000</div>
                                        </div>
                                        <div
                                            class="h-[20px] leading-[20px] mb-[12px] flex justify-between items-center">
                                            <div class="text-[#4B5563]">150****2288</div>
                                            <div class="font-[500]">投入金额 ¥5,000</div>
                                        </div>
                                        <div
                                            class="h-[20px] leading-[20px] mb-[12px] flex justify-between items-center">
                                            <div class="text-[#4B5563]">150****2288</div>
                                            <div class="font-[500]">投入金额 ¥5,000</div>
                                        </div>
                                        <div
                                            class="h-[20px] leading-[20px] mb-[12px] flex justify-between items-center">
                                            <div class="text-[#4B5563]">150****2288</div>
                                            <div class="font-[500]">投入金额 ¥5,000</div>
                                        </div>
                                        <div
                                            class="h-[20px] leading-[20px] mb-[12px] flex justify-between items-center">
                                            <div class="text-[#4B5563]">150****2288</div>
                                            <div class="font-[500]">投入金额 ¥5,000</div>
                                        </div>
                                        <div @click="showDialog('get')"
                                            class=" cursor-pointer absolute bottom-0 h-[40px] bg-[#68c6e2] w-full rounded-md text-center leading-[40px] text-white text-[14px]">
                                            立即参与
                                        </div>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="24" class="mt-[24px]">
                <el-card>
                    <div class="flex justify-between items-center text-[16px]">
                        <div class=" font-bold text-[18px]">我的实盘</div>
                        <div class="flex items-center">
                            <el-icon>
                                <Wallet />
                            </el-icon>
                            <div class="mx-[6px]">总资产:</div>
                            <div>¥1,286,500.00</div>
                            <el-icon class="ml-[10px]" color="#16A34A">
                                <TrendCharts />
                            </el-icon>
                            <div class="mx-[6px] text-[#16A34A]">累计收益:</div>
                            <div class="text-[#16A34A]">+¥286,500.00</div>
                        </div>
                    </div>
                    <div class="bg-[#f9fafb] h-[44px] mt-[20px] leading-[44px] px-[16px]">
                        <el-row>
                            <el-col :span="5">
                                <div class="text-[#4B5563] text-[14px]">策略名称</div>
                            </el-col>
                            <el-col :span="3">
                                <div class="text-[#4B5563] text-[14px] text-right">投入金额</div>
                            </el-col>
                            <el-col :span="3">
                                <div class="text-[#4B5563] text-[14px] text-right">当前资产</div>
                            </el-col>
                            <el-col :span="3">
                                <div class="text-[#4B5563] text-[14px] text-right">累计收益</div>
                            </el-col>
                            <el-col :span="3">
                                <div class="text-[#4B5563] text-[14px] text-right">收益率</div>
                            </el-col>
                            <el-col :span="3">
                                <div class="text-[#4B5563] text-[14px] text-center">持仓时间</div>
                            </el-col>
                            <el-col :span="4">
                                <div class="text-[#4B5563] text-[14px] text-center">操作</div>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="h-[65px] leading-[65px] px-[16px] border-0 border-b-[#f1f1f4] border-b-[1px] border-solid"
                        v-for="value in 3" :key="value">
                        <el-row>
                            <el-col :span="5">
                                <div class="text-[#4B5563] text-[14px] flex items-center">
                                    <div class="font-[500] text-black">趋势跟踪策略 A1</div>
                                    <div class="ml-[10px]">
                                        <el-tag type="primary">五星策略</el-tag>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="3">
                                <div class="text-black text-[14px] text-right">¥500,000.00</div>
                            </el-col>
                            <el-col :span="3">
                                <div class="text-black text-[14px] text-right">¥500,000.00</div>
                            </el-col>
                            <el-col :span="3">
                                <div class="text-[#16A34A] text-[14px] text-right">+¥500,000.00</div>
                            </el-col>
                            <el-col :span="3">
                                <div class="text-[#16A34A] text-[14px] text-right">+38.1%</div>
                            </el-col>
                            <el-col :span="3">
                                <div class="text-black text-[14px] text-center">186 天</div>
                            </el-col>
                            <el-col :span="4">
                                <div
                                    class="text-[#4B5563] text-[14px] text-center flex justify-center items-center h-[65px]">
                                    <div @click="showDialog('detail')"
                                        class="border border-solid h-[34px] leading-[34px] px-[14px] border-[#E5E7EB] rounded-sm cursor-pointer">
                                        查看</div>
                                    <div @click="showDialog('end')"
                                        class="ml-[10px] border border-solid h-[34px] leading-[34px] px-[14px] border-[#E5E7EB] rounded-sm cursor-pointer">
                                        结束</div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-dialog v-model="dialogVisible" title="" width="399">
            <div class="h-[524px] mt-[20px]">
                <el-card shadow="never">
                    <div class="h-[480px] relative">
                        <template v-if="dialogType === 'get'">
                            <div class="flex justify-between items-center">
                                <div>
                                    <div class="font-[500]">趋势跟踪策略 A1</div>
                                    <div class="mt-[4px]">
                                        <el-tag type="primary">五星策略</el-tag>
                                        <el-tag type="success" class="ml-[8px]">稳健性</el-tag>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-center justify-center mt-[140px]">
                                <div class="mr-[80px]">投入资金</div>
                                <el-input v-model="investedFunds" type="number" style="width: 80px;" />
                            </div>
                            <div class="mt-[100px] text-center text-[#3D3D3D]">
                                参与投入将会扣除1%保险金，
                            </div>
                            <div class="text-[#3D3D3D]">当用户结束实盘时如果发送亏损将由保险仓完全赔付</div>
                            <div @click="dialogVisible = false"
                                class=" cursor-pointer absolute bottom-0 h-[40px] bg-[#68c6e2] w-full rounded-md text-center leading-[40px] text-white text-[14px]">
                                确定
                            </div>
                        </template>
                        <template v-else-if="dialogType === 'detail'">
                            <div class="flex justify-between items-center">
                                <div>
                                    <div class="font-[500]">趋势跟踪策略 A1</div>
                                    <div class="mt-[4px]">
                                        <el-tag type="primary">五星策略</el-tag>
                                        <el-tag type="success" class="ml-[8px]">稳健性</el-tag>
                                    </div>
                                </div>
                            </div>
                            <div class="grid grid-cols-2 mt-[20px]">
                                <div>
                                    <div class="text-[#6B7280] text-[14px]">年化收益率</div>
                                    <div class="text-[18px] mt-[2px] text-[#16A34A] font-[500]">+42.8%</div>
                                </div>
                                <div>
                                    <div class="text-[#6B7280] text-[14px]">最大回撤</div>
                                    <div class="text-[18px] mt-[2px] text-[#DC2626] font-[500]">-8.8%</div>
                                </div>
                            </div>
                            <div class="grid grid-cols-2 mt-[20px]">
                                <div>
                                    <div class="text-[#6B7280] text-[14px]">今日收益</div>
                                    <div class="text-[18px] mt-[2px] font-[500]">¥500</div>
                                </div>
                                <div>
                                    <div class="text-[#6B7280] text-[14px]">累计收益</div>
                                    <div class="text-[18px] mt-[2px] font-[500]">¥5,000</div>

                                </div>
                            </div>
                            <div class="grid grid-cols-2 mt-[20px]">
                                <div>
                                    <div class="text-[#6B7280] text-[14px]">日最大亏损</div>
                                    <div class="text-[18px] mt-[2px] font-[500]">¥500</div>
                                </div>
                                <div>
                                    <div class="text-[#6B7280] text-[14px]">日最大盈利</div>
                                    <div class="text-[18px] mt-[2px] font-[500]">¥5,000</div>

                                </div>
                            </div>
                            <div class="grid grid-cols-2 mt-[20px] mb-[20px]">
                                <div>
                                    <div class="text-[#6B7280] text-[14px]">运行时长</div>
                                    <div class="text-[18px] mt-[2px] font-[500]">1,286</div>

                                </div>
                                <div>
                                    <div class="text-[#6B7280] text-[14px]">结束预计收益</div>
                                    <div class="text-[18px] mt-[2px] font-[500]">¥2.8M</div>
                                </div>
                            </div>
                            <div class="mb-[10px] flex justify-between items-center">
                                <div class="font-[500] ">每日盈亏</div>
                                <div>
                                    <span class="cursor-pointer">上一页</span>
                                    <span class="ml-[10px] cursor-pointer">下一页</span>
                                </div>
                            </div>
                            <div class="h-[20px] leading-[20px] mb-[12px] flex justify-between items-center">
                                <div class="text-[#4B5563]">2025/09/01</div>
                                <div class="font-[500] text-[#16A34A]">+86.22</div>
                            </div>
                            <div class="h-[20px] leading-[20px] mb-[12px] flex justify-between items-center">
                                <div class="text-[#4B5563]">2025/09/01</div>
                                <div class="font-[500] text-[#DC2626]">-86.22</div>
                            </div>
                            <div class="h-[20px] leading-[20px] mb-[12px] flex justify-between items-center">
                                <div class="text-[#4B5563]">2025/09/01</div>
                                <div class="font-[500]">+86.22</div>
                            </div>
                            <div class="h-[20px] leading-[20px] mb-[12px] flex justify-between items-center">
                                <div class="text-[#4B5563]">2025/09/01</div>
                                <div class="font-[500]">+86.22</div>
                            </div>
                        </template>
                        <template v-else-if="dialogType === 'end'">
                            <div class="flex justify-between items-center">
                                <div>
                                    <div class="font-[500]">趋势跟踪策略 A1</div>
                                    <div class="mt-[4px]">
                                        <el-tag type="primary">五星策略</el-tag>
                                        <el-tag type="success" class="ml-[8px]">稳健性</el-tag>
                                    </div>
                                </div>
                            </div>
                            <div class="grid grid-cols-2 mt-[20px]">
                                <div>
                                    <div class="text-[#6B7280] text-[14px]">年化收益率</div>
                                    <div class="text-[18px] mt-[2px] text-[#16A34A] font-[500]">+42.8%</div>
                                </div>
                                <div>
                                    <div class="text-[#6B7280] text-[14px]">最大回撤</div>
                                    <div class="text-[18px] mt-[2px] text-[#DC2626] font-[500]">-8.8%</div>
                                </div>
                            </div>
                            <div class="grid grid-cols-2 mt-[20px]">
                                <div>
                                    <div class="text-[#6B7280] text-[14px]">今日收益</div>
                                    <div class="text-[18px] mt-[2px] font-[500]">¥500</div>
                                </div>
                                <div>
                                    <div class="text-[#6B7280] text-[14px]">累计收益</div>
                                    <div class="text-[18px] mt-[2px] font-[500]">¥5,000</div>

                                </div>
                            </div>
                            <div class="grid grid-cols-2 mt-[20px] mb-[20px]">
                                <div>
                                    <div class="text-[#6B7280] text-[14px]">运行时长</div>
                                    <div class="text-[18px] mt-[2px] font-[500]">64天</div>

                                </div>
                                <div>
                                    <div class="text-[#6B7280] text-[14px]">结束预计收益</div>
                                    <div class="text-[18px] mt-[2px] font-[500]">¥2.8M</div>
                                </div>
                            </div>
                            <div class="flex justify-between items-center h-[20px] leading-[20px] mb-[12px]">
                                <div class="font-[500]">分成档次</div>
                                <div class="font-[500]">分成占比</div>
                            </div>
                            <div class="h-[20px] leading-[20px] mb-[12px] flex justify-between items-center">
                                <div class="text-[#4B5563]">150****2288</div>
                                <div class="font-[500]">投入金额 ¥5,000</div>
                            </div>
                            <div class="h-[20px] leading-[20px] mb-[12px] flex justify-between items-center">
                                <div class="text-[#4B5563]">150****2288</div>
                                <div class="font-[500]">投入金额 ¥5,000</div>
                            </div>
                            <div class="h-[20px] leading-[20px] mb-[12px] flex justify-between items-center">
                                <div class="text-[#4B5563]">150****2288</div>
                                <div class="font-[500]">投入金额 ¥5,000</div>
                            </div>
                            <div class="h-[20px] leading-[20px] mb-[12px] flex justify-between items-center">
                                <div class="text-[#4B5563]">150****2288</div>
                                <div class="font-[500]">投入金额 ¥5,000</div>
                            </div>
                            <div @click="dialogVisible = false"
                                class=" cursor-pointer absolute bottom-0 h-[40px] bg-[#68c6e2] w-full rounded-md text-center leading-[40px] text-white text-[14px]">
                                结束实盘
                            </div>
                        </template>
                    </div>
                </el-card>
            </div>
        </el-dialog>
    </div>
    <Footer />
</template>

<style scoped></style>